<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="TeenPatti游戏详情" width="60%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box" style="padding:0;padding-bottom:30px;">
      <div class="flex marginL20">
        <p class="box-title marginR20">游戏类型:【<span class="mustPass">{{gameType(formParams.game_id)}}</span>】</p>
        <p class="box-title marginR20">用户ID:【<span class="mustPass">{{formParams.user_id}}</span>】{{formParams.nickname}}</p>
        <p class="box-title">牌局号:【<span class="mustPass">{{formParams.game_number}}</span>】</p>
      </div>
      <!-- 发牌 -->
      <div v-if="dealCardsData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20" style="margin-bottom:10px;">荷官发牌 :</p>
        <div class="border_card">
          <div class="fontSize16 marginT5 flex" v-for="(item,index) in dealCardsData" :key="index">
            <div class="mustPass userName marginR20">{{item.user_id>0?'玩家【'+item.user_id+'】'+item.nickname:robotLabel(item.robot_kill_type)+'【'+item.user_id+'】'+item.nickname}}</div>
            <span class="marginR5 collapse_content gambling" v-for="(third,two) in item.cards_data" :key="two">
              <!-- 4黑桃 3红桃 2梅花 1方片 5小鬼 6大鬼 -->
              <div v-if="third.color_type == 4">
                <img src='../../../icons/iocn/ht-icon.png' />{{third.poker_num}}  
              </div>
              <div v-if="third.color_type == 3">
                <img src='../../../icons/iocn/red-icon.png' />{{third.poker_num}}  
              </div>
              <div v-if="third.color_type == 2">
                <img src='../../../icons/iocn/mh-icon.png' />{{third.poker_num}}  
              </div>
              <div v-if="third.color_type == 1">
                <img src='../../../icons/iocn/fk-icon.png' />{{third.poker_num}}  
              </div>
              <div v-if="third.color_type == 5">
                <img src='../../../icons/iocn/xw-icon.png' />{{third.poker_num}}  
              </div>
              <div v-if="third.color_type == 6">
                <img src='../../../icons/iocn/dw-iocn.png' />{{third.poker_num}}  
              </div>
            </span>  
            <span class="poker_details colorRed">牌型id:【{{item.poker_id}}】,随机范围:{{item.poker_min}}~{{item.poker_max}}</span>
          </div>
        </div>
      </div>
      <!-- 换牌 -->
      <div v-if="changeCardsData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20" style="margin-bottom:10px;">换牌 :</p>
        <div class="border_card">
          <div class="fontSize16 marginT5 flex" v-for="(item,index) in changeCardsData" :key="index">
            <div class="mustPass userName marginR20">{{item.user_id>0?'玩家【'+item.user_id+'】'+item.nickname:robotLabel(item.robot_kill_type)+'【'+item.user_id+'】'+item.nickname}}</div>
            <span class="marginR5 gambling" v-for="(second,two) in item.cards_data" :key="two">{{second.poker_remark}}</span>
            <span class="marginL20 colorRed " v-show="item.change_card_reason" style="font-weight:500;">(原因： {{item.change_card_reason}})</span>
            <span class="poker_details colorRed">牌型id:【{{item.poker_id}}】,随机范围:{{item.poker_min}}~{{item.poker_max}}</span>
          </div>
        </div>
      </div>
      <!-- 房间抵注 -->
      <div v-if="roomData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20 marginT20" style="margin-bottom:10px;">房间抵注 :<span class="colorGre fontSize16 marginL10">{{formParams.base_bet}}</span></p>
        <div class="border_card">
          <div class="fontSize16 marginT5 flex" v-for="(item,index) in roomData" :key="index">
            <div class="mustPass userName marginR20">{{item.user_id>0?'玩家【'+item.user_id+'】'+item.nickname:robotLabel(item.robot_kill_type)+'【'+item.user_id+'】'+item.nickname}}</div>
            <span class="gambling">游戏前卢比:<span class="colorGre fontSize16 marginL10">{{item.player_enter_chips/10000}}</span></span>
          </div>
        </div>
      </div>
      <!-- 输赢 -->
      <div v-if="winningData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20 marginT20" style="margin-bottom:10px;">输赢 :
          <!-- <span class="marginL20" style="font-size:18px;">抽水:<span class="colorGre fontSize16">{{formParams.game_tax}}</span></span> -->
        </p>
        <div class="border_card">
          <div class="fontSize16 marginT5 flex" v-for="(item,index) in winningData" :key="index">
            <div class="mustPass userName marginR20">{{item.user_id>0?'玩家【'+item.user_id+'】'+item.nickname:robotLabel(item.robot_kill_type)+'【'+item.user_id+'】'+item.nickname}}</div>
            <span class="gambling" v-show="item.win_lose">卢比:<span :class="item.win_lose>0?'colorGre':'colorRed'" class="fontSize16 marginL10">{{item.win_lose/10000}}</span> <span class="colorRed" style="font-size:14px;" v-show="item.robot_kill_type==8 && item.round">第【{{item.round}}】轮结束对局</span></span>
          </div>
        </div>
      </div>
      <!-- 牌局 -->
      <div v-if="roundData.length" class="cardBorder-item marginT20">
        <p class="fontSize18 marginR20" style="margin-bottom:15px;">牌局:</p>
        <div class="border_card">
          <div v-for="(item,index) in roundData" :key="index">
            <el-collapse v-model="dealCardsNames">
              <el-collapse-item>
                <template slot="title">
                  <span class="colorGre fontSize16 marginL20">第{{item.time}}轮</span>
                </template>
                <div class="flexStartDetween paddingT10" v-for="(second,two) in item.data" :key="two" style="background:#F9F9F9;border-bottom:1px solid #ededed;">
                  <div class="flexStart">
                    <div class="mustPass userName marginR20">{{second.user_id>0?'玩家【'+second.user_id+'】'+second.nickname:robotLabel(second.robot_kill_type)+'【'+second.user_id+'】'+second.nickname}}</div>
                    <span class="collapse_content gambling">{{second.action}}</span>
                  </div>
                  <span class="marginR10">{{second.action_time_str}}</span>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getUserGameDetails
} from "@/api/player";
import {
  GAME_TYPE
} from '@/utils/enum'
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      GAME_TYPE,
      isShow: false,
      dealCardsData:[], //发牌
      changeCardsData:[], //换牌
      roomData:[], //房间抵注
      winningData:[], //输赢
      roundData:[], //轮次
      dealCardsNames:[],
      robotDataList:[
        {label:'正常机器人',value:0},
        {label:'非陪跑机器人',value:1,type:'primary'},
        {label:'杀率机器人',value:2,type:'waring'},
        {label:'大杀率机器人',value:4,type:'success'},
        {label:'陪跑机器人',value:8,type:'info'},
        {label:'随机机器人',value:16,type:'info'},
        {label:'杀率陪跑机器人',value:32,type:'info'},
      ],
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.getGameDetailsInfo()
      }
    }
  },
  mounted () { },
  methods: {
    // 游戏详情
    async getGameDetailsInfo () {
      let that = this;
      that.dealCardsData=[] //发牌
      that.changeCardsData=[] //换牌
      that.roomData=[] //房间抵注
      that.winningData=[] //输赢
      that.roundData=[] //轮次
      const response = await getUserGameDetails({game_number:that.formParams.game_number})
      if (response.code == 1) {
        if (response.data) {
          // 牌型信息
          if(response.data.info_data){
            for (const key in response.data.info_data) {
              // 发牌
              if(key==1 && response.data.info_data[key]){
                that.dealCardsData=response.data.info_data[key]
              }
              // 换牌
              if(key==2 && response.data.info_data[key]){
                let arr1 = response.data.info_data[1],arr2 = response.data.info_data[2];
                arr1.forEach(item => {
                  item.cards=item.cards.toString(',')
                  arr2.forEach(item2 => {
                    item2.cards=item2.cards.toString(',')
                    if (item.user_id == item2.user_id) {
                      if(item.cards!=item2.cards){
                        that.changeCardsData.push(item2)
                      }
                    }
                  })
                });
              }
              // 房间抵注
              if(key==3 && response.data.info_data[key]){
                that.roomData=response.data.info_data[key]
              }
              // 输赢
              if(key==4 && response.data.info_data[key]){
                that.winningData=response.data.info_data[key]
              }
            }
          }
          // 牌局
          if(response.data.round_data){
            for (const key in response.data.round_data) {
              that.roundData.push({time:key,data:response.data.round_data[key]})
            }
          }
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 游戏类型展示
    gameType(cellValue){
      return (this.GAME_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 杀率展示
    robotLabel(cellValue){
      return (this.robotDataList.find((item) => item.value === cellValue)?.label || " ");
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.cardBorder-item{
  padding:2px 10px 20px 10px;
  background-color: #F9F9F9;
  border-radius: 5px;
}
.border_card{
  max-height: 300px;
  overflow: auto;
}
.userName{
  width: 280px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.collapse_content{
  padding-bottom: 10px;
  img{
    vertical-align: text-top;
    margin-left: 5px;
    margin-right: 2px;
  }
}
.poker_details{
  font-size: 14px;
  margin-left: 10px;
}
.gambling{
  font-size: 16px;
}
</style>
